<!--
 * @Description: 周计划实施管理
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2023-03-15 10:18:07
 * @LastEditTime: 2023-05-19 15:14:33
 * @FilePath: \cscec-pms-admin\src\views\construction\weekPlan\implementationManagementWeekPlan.vue
-->
<template>
  <base-breadcrumb>
  <a-spin :spinning="loading">
  <a-card>
      <div class="title-wrapper">
        <title-name title="周计划看板" />
        <a-icon
          :type="planBoardVisible ? 'up' : 'down'"
          @click="planBoardVisible = !planBoardVisible"
        />
      </div>
      <ul class="master-plan-list">
        <li
          v-for="({label,value,img,valueKey},index) in masterPlanList"
          :key="index"
          @click="handleNodeInfo(index,label,valueKey)"
        >
          <div>
            <span>{{ label }}</span>
            <p>{{ value }}<i v-if="index<2">%</i></p>
          </div>
          <img
            :src="img"
            alt=""
          >
        </li>
      </ul>
      <NodeDetail
        v-show="planBoardVisible"
        :visible="planBoardVisible"
        :planId="planId"
        :thisWeek="thisWeek"
      />
      <NodeInfo
        :visible.sync="nodeInfoVisible"
        :data="nodeInfoData"
        :title="nodeInfoTitle"
        :ready="nodeInfoReady"
      />
    </a-card>
    <a-card>
      <PlanDetail  :load.sync="loading" :allData="allData0"  :businessType="'0'" />
    </a-card>
    <a-card>
      <PlanDetail  :load.sync="loading" :allData="allData1"  :businessType="'1'" />
    </a-card>
    <a-card>
      <PlanDetail  :load.sync="loading" :allData="allData2"  :businessType="'2'" />
    </a-card>
    <div class="page-btn-right-top">
      <a-button @click="$close">
        关闭
      </a-button>
    </div>
    </a-spin>
  </base-breadcrumb>
</template> 
<script>
import PlanDetail from './components/PlanDetail'
import { masterPlanList} from './model.js'
import NodeDetail from './components/NodeDetail'
import NodeInfo from './components/NodeInfo'
import weekPlanApi from '@/api/construction/weekPlanApi'
export default {
  name: 'implementationManagementWeekPlan' + Date.now(),
  components: {
    PlanDetail,
    NodeDetail,
    NodeInfo
  },
  data () {
    return {
      // 视图模式,true:平铺视图,false:树状视图
      viewMode: true,
      // 加载中
      loading: false,
      // 周计划看板显示隐藏
      planBoardVisible: false,
       // 周计划看板
      masterPlanList,
      // 节点信息加载完成
      nodeInfoReady: true,
       // 节点信息标题
      nodeInfoTitle: '',
      // 节点信息数据
      nodeInfoData: [],
      // 节点信息显示隐藏
      nodeInfoVisible: false,
      allData0:  {},
      allData1:  {},
      allData2:  {},
      planId:null,
      thisWeek:null
    }
  },
 async mounted(){
   await this.init();
   await this.getMasterPlanListNode();
   this.thisWeek = this.$route.query.thisWeek;
  },
  methods:{
    init() {
      const { planId } = this.$route.query
      this.planId = planId
      if (planId) {
        const fun =weekPlanApi.weekPlanTileSearch;
        fun({planId}).then(res => {
          if (res.data) {
            const { data } = res
            if (data['0']) {
              this.allData0 = data['0']
            }
            if (data['1']) {
              this.allData1 = data['1']
            }
            if (data['2']) {
              this.allData2 = data['2']
            }
          }
        })
      }
    },
    //获取数据看板
    getMasterPlanListNode(){
      if (this.planId) {
        const fun =weekPlanApi.weekPlanBulletinBoard;
        fun({id:this.planId}).then(res => {
           if(res.code*1 === 200){
            let data = res.data;
            this.masterPlanList[0].value = data.nodeONTimeCompletionRate
            this.masterPlanList[1].value = data.nodeCompletionRate
            this.masterPlanList[2].value = data.firstLevelNode
            this.masterPlanList[3].value = data.secondLevelNode
            this.masterPlanList[4].value = data.thirdLevelNode
           }
        })
      }
    },
     /**
     * @description: 跳转节点信息
     * @param {number} level 节点等级
     * @param {string} label 字段名称
     * @return {void}
     */
     handleNodeInfo(level, label,valueKey) {
      const list = [
        [
          {
            name: 'constructionPreparationNode',
            label: '施工准备类节点',
            value: void 0
          },
          {
            name: 'designNode',
            label: '设计类节点',
            value: void 0
          },
          {
            name: 'procurementCategoryNode',
            label: '招采类节点',
            value: void 0
          },
          {
            name: 'projectNode',
            label: '工程类节点',
            value: void 0
          },
          {
            name: 'completionAcceptanceNode',
            label: '竣工验收类节点',
            value: void 0
          }
        ],
        [
          {
            name: 'firstLevelNode',
            label: '一级节点',
            value: void 0
          },
          {
            name: 'secondLevelNode',
            label: '二级节点',
            value: void 0
          },
          {
            name: 'thirdLevelNode',
            label: '三级节点',
            value: void 0
          },
          {
            name: 'constructionPreparationNode',
            label: '施工准备类节点',
            value: void 0
          },
          {
            name: 'designNode',
            label: '设计类节点',
            value: void 0
          },
          {
            name: 'procurementCategoryNode',
            label: '招采类节点',
            value: void 0
          },
          {
            name: 'projectNode',
            label: '工程类节点',
            value: void 0
          },
          {
            name: 'completionAcceptanceNode',
            label: '竣工验收类节点',
            value: void 0
          }
        ]
      ]
      if (level > 1) {
        this.$router.push({
          path: '/construction/weekPlan/weekPlanNodeInfo',
          query: {
           planId:this.planId,
           nodeControl:valueKey,
           pictureDown:false,  //是否是图形
           thisWeek:this.thisWeek
          }
        })
      } else {
        this.nodeInfoVisible = true
        this.nodeInfoData = []
        if (level === 0) {
          this.getOnTimeCompleteRateDetail(list[level],true)
          this.nodeInfoTitle = '节点按时完成率'
        } else {
          this.getOnTimeCompleteRateDetail(list[level],false)
          this.nodeInfoTitle = '节点完成率'
        }
      }
    },
    getOnTimeCompleteRateDetail(list,flag){
      this.nodeInfoReady = true;
      this.nodeInfoData = list;
      weekPlanApi.weekPlanPopUpNotification({planId:this.planId,onTime:flag}).then((res)=>{
        if(res.code == 200){
          this.nodeInfoReady = false
          let {data} = res;
          this.nodeInfoData.map((el) => {
          for (let item in data) {
            if (el.name === item) {
              el.value = data[item]
            }
          }
          return el
        })
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 18px;
  }
}
.master-plan-list {
  display: flex;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 0;
  border: 1px solid #e4e4e4;
  li {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: 30px 0;
    cursor: pointer;
    > div {
      width: 100%;
      text-align: center;
      margin-bottom: 40px;
      span {
        font-size: 14px;
        color: #999;
      }
      p {
        font-size: 26px;
        color: #333;
        margin-bottom: 0;
        margin-top: 20px;
        i {
          font-style: normal;
          font-size: 14px;
        }
      }
    }
    > img {
      width: 70%;
    }
  }
}
.title-wrapper {
  display: flex;
  > button {
    margin-left: 6px;
    &:first-of-type {
      margin-left: auto;
    }
  }
}
</style>